<template>
<view class="page">
  <view class="nav-style" :style="{'height':navHeight+'px','padding-top':statusBarHeight+'rpx'}" @click="onBack">
    <image class="back-img" src="/static/img/back.png" mode=""></image>
    <view class="top-tl">附近的VCT门诊</view>
  </view>
  <view class="container">
   <view class="title">
      <image class="location" src="/static/img/location.png" mode="widthFix" />
      您所在区域的VCT门诊</view>
    <view v-for="item in list" :key="item.id" class="content">
      <view class="name">{{ item.Name }}</view>
      <view class="label-item">
        <image class="icon" src="/static/img/address.png" mode="widthFix" />
        <text class="value">{{ item.Address }}</text>
      </view>
      <view class="label-item gray">
        <image class="icon" src="/static/img/time.png" mode="widthFix" />
        <text class="value">{{ item.ServerDate }}</text>
      </view>
      <view class="label-item gray" @click="onPhoneCall(item.Phone)">
        <image class="icon" src="/static/img/phone.png" mode="widthFix" />
        <text class="value">{{ item.Phone }}</text>
      </view>
    </view>

  </view>
</view>
</template>

<script>
import { GetCDCVicinity } from '@/utils/api.js'
export default {
  name: 'Hospital',
  data() {
    return {
      statusBarHeight: '',
      navHeight: '',
      list: []
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (e) => {
        // this.compareVersion(e.SDKVersion, '2.5.0')
        let statusBar = 0
        let customBar = 0


        // #ifdef MP
        statusBar = e.statusBarHeight
        customBar = e.statusBarHeight + 45
        if (e.platform === 'android') {
          // this.$store.commit('SET_SYSTEM_IOSANDROID', false)
          customBar = e.statusBarHeight + 50
        }
        // #endif


        // #ifdef MP-WEIXIN
        statusBar = e.statusBarHeight
        // @ts-ignore
        const custom = wx.getMenuButtonBoundingClientRect()
        customBar = custom.bottom + custom.top - e.statusBarHeight
        // #endif

        // #ifdef APP-PLUS
        console.log('app-plus', e)
        statusBar = e.statusBarHeight
        customBar = e.statusBarHeight + 45
        // #endif


        // #ifdef H5
        statusBar = 0
        customBar = e.statusBarHeight + 45
        // #endif

        // 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
        console.log('SET_STATUS_BAR', statusBar)
        console.log('SET_CUSTOM_BAR', customBar)
        console.log('SET_SYSTEM_INFO', e)
        this.statusBarHeight = statusBar
        this.navHeight = customBar
      }
    })
    this.getData()
  },
  methods: {
    onBack() {
      uni.navigateTo({
        url: '/pages/welcome/index'
      })
    },
    async getData() {
      const city = this.$store.state.vx_city
      const res = await GetCDCVicinity({
        Province: city.province,
        City: city.city,
        County: city.district,
		type:'VCT门诊'
      })
      if (res.Code === 200) {
		 // console.log(res);
        this.list = res.Data
      }
    },
    onPhoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      });
    },
	//疾控中心
	GO_Cdc(){
		
	},
	//社会组织
	GO_Sociaorg(){
		
	},
	//医院
	GO_Hospital(){
		
	}
  }
}
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  background-color: #1E64E1;
  display: flex;
  flex-direction: column;
  .container {
    flex: 1;
    position: relative;
    width: 100%;
    padding-bottom: 30rpx;
    background: #F5F7FB;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
    border-radius: 38rpx 38rpx 0rpx 0rpx;
    overflow: scroll;
    .location {
      display: inline-block;
      width: 20rpx;
      margin-right: 20rpx;
    }
	
    .title {
      height: 23rpx;
      padding: 42rpx 0 30rpx 0;
      margin-bottom: 34rpx;
      line-height: 23rpx;
      margin-left: 24rpx;
      font-size: 28rpx;
      font-weight: 400;
      box-sizing: border-box;
      color: #090909;
    }
    .content {
      width: 704rpx;
      padding: 32rpx 0 40rpx 42rpx;
      margin: 0 auto 15rpx;
      border-radius: 15rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      .name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
      }
      .label-item {
        margin-top: 22rpx;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        &.gray {
          color: #999999;
        }
        .icon {
          display: inline-block;
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
        .label {
          font-weight: bold;
        }
        .value {
          font-weight: 400;
        }
      }
    }
  }
}
.nav-style {
  display: flex;
  padding-left: 20rpx;
  align-items: center;
  .back-img {
    width: 36rpx;
    height: 36rpx;
  }
  //导航标题
  .top-tl {
    line-height: 54rpx;
    width: 630rpx;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 20rpx;
    font-size: 40rpx;
    overflow: hidden;
    text-align: center;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*不换行*/
    text-overflow: ellipsis;
    /*超出部分文字以...显示*/
  }
}
</style>
